<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>AJAX动态渲染表格</title>
    <!-- 1.选择一个模板(这次试用art-template)
    https://github.com/tj/consolidate.js#upported-template-engines
    2.下载模板引擎
    3.引入到页面中
    4.准备一个模板(script 模板去官网查找)
    5.准备一个数据
    6.通过模板引擎的JS提供的函数将模板和数据整合 得到渲染结果HTML
    7.将渲染结果的HTML 设置到默认元素的 innerHtml中 -->


    <!-- 为什么不在JS变量中写模板？ -->
    <!-- 1.如果是 维护不方便 不能换行 没有着色 -->
    <!-- 为什么试用script标记 -->
    <!-- script 标签的特点是： -->
    <!-- 1. innerHTML不会显示在页面上 -->
    <!-- 2. 如果type不是 text/javascript 的话 内部的内容不会作为 JavaScript 解析 -->
    <script id="tmpl" type="text/x-art-template">
        {{each comments}}
            <tr>
                <td>{{$value.id}}</td>
                <td>{{$value.name}}</td>
                <td>{{$value.age}}</td>
            </tr>
        {{/each}} 
    </script>
    <script src="template-web.js"></script>
    <script>
        var xhr = new XMLHttpRequest();
        xhr.open('GET','http://127.0.0.1/AJAX_project/ajax_dynamic_table/ajax_get.php');
        xhr.send();
        xhr.onreadystatechange=function(){
            if(this.readyState == 4){
                // JSON解析成对象数组
                var res = JSON.parse(this.responseText);

                // 将res作为属性放到comments里面 为模板所需
                var content = {comments:res}

                // 借助模板引擎提供的API 渲染数据 输出结果
                // template(参数1，参数2) 参数1：模板(script)的id 参数2：处理内容  返回：html
                var html = template('tmpl',content);
                console.log(html);
                // 通过innerHTML 加入到DOM中
                var table = document.getElementById("table");
                table.innerHTML = html;
            }
        };
    </script>
</head>
<body>
    <table width=400 border="1px solid #ccc" rules=all>
        <tr>
            <th >id</th>
            <th >name</th>
            <th >age</th>
        </tr>
        <tbody id="table" style="text-align:center">

        </tbody>
    </table>
</body>
</html>